/**
 * 主页面
 */
import React from 'react';
import {Image, StatusBar, StyleSheet, Text, View} from 'react-native';
import {Button, InputItem, Checkbox} from '@ant-design/react-native';
import {
  windowHeight,
  windowStatusBarHeight,
  windowWidth,
} from '../../utils/commonUtils';
import {LOGINTOP} from '../../image';

export const Login = ({navigation}) => {
  const AgreeItem = Checkbox.AgreeItem;
  return (
    <View style={styles.login_box}>
      <StatusBar
        translucent={true}
        backgroundColor="transparent"
        barStyle={'dark-content'}
      />
      <View style={styles.login_top}>
        <Image source={LOGINTOP} style={styles.login_logo} />
      </View>
      <View style={styles.login_bottom}>
        <View style={styles.login_content_top}>
          <InputItem
            placeholder="请输入手机账号"
            type={'number'}
            placeholderTextColor={'#A6A6A6'}
          />
          <View style={{height: 10}} />
          <InputItem
            placeholder="请输入账号密码"
            type={'password'}
            placeholderTextColor={'#A6A6A6'}
          />
        </View>

        <View style={styles.login_content_bottom}>
          <View>
            <AgreeItem
              style={{color: 'rgba(32,161,98,0.67)'}}
              onChange={() => {
                console.log('231');
              }}>
              <Text style={{fontSize: 11}}>
                登陆即代表同意轻愔悦《用户条款》&《隐私条款》
              </Text>
            </AgreeItem>
          </View>
          <View style={styles.login_phone}>
            <Button
              type="primary"
              size="large"
              activeStyle={{
                backgroundColor: 'rgba(32,161,98,0.67)',
                borderColor: 'rgba(32,161,98,0.67)',
              }}
              style={styles.login_phone_btn}
              onPress={() => navigation.replace('Main')}>
              登陆
            </Button>
          </View>
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  login_box: {
    width: windowWidth,
    height: windowHeight + windowStatusBarHeight,
    marginTop: windowStatusBarHeight,
  },
  login_top: {
    width: '100%',
    marginTop: 60,
    display: 'flex',
    alignItems: 'center',
  },
  login_logo: {
    width: 147,
    height: 264,
  },
  login_bottom: {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
  },
  login_content_top: {
    width: '90%',
    height: 160,
    display: 'flex',
    justifyContent: 'center',
  },
  login_content_bottom: {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
  },
  login_phone: {
    width: '100%',
    height: 45,
    margin: 0,
    display: 'flex',
    alignItems: 'center',
  },
  login_phone_btn: {
    marginTop: 30,
    width: 300,
    borderRadius: 135,
    borderColor: '#20A162',
    backgroundColor: '#20A162',
  },
});
